<template>
	<view class="container">
		<view class="title">验证手机号</view>
		<view class="subtitle">请先验证注册时所用的手机号</view>

		<!-- 手机号输入 -->
		<view class="input-group">
			<view class="country-code">+{{ setting.areaCode }}</view>
			<input disabled type="number" v-model="setting.phone" placeholder="请输入手机号" maxlength="11" class="input" />
		</view>
		
		<!-- 验证码输入 -->
		<view class="input-group">
			<input type="number" v-model="setting.verifyCode" placeholder="请输入验证码" maxlength="6" class="input" />
			<view class="input-group-fixed">
				<uni-icons class="clear-icon" v-show="setting.verifyCode" @click="setting.verifyCode = ''" type="closeempty" size="20"></uni-icons>
				<view class="verify-btn" :class="{ disabled: setting.isCountdown || !canGetCode }" :style="verifyBtnStyle" @click="setting.getVerifyCode">
					{{ countdownText }}
				</view>
			</view>
			
		</view>

		<!-- 登录按钮 -->
		<button class="submit-btn xjs-btn-primary" @click="handleSubmit">确定</button>

		<!-- 遇到问题 -->
		<view class="help">
			没收到验证码？
			<text class="link" @click="showHelpPopup = true">请点击</text>
		</view>

		<!-- 验证码帮助弹框 -->
		<uni-popup ref="popup" type="bottom" @change="popupChange" background-color="#fff" border-radius="32rpx 32rpx 0 0">
			<view class="popup-content">
				<view class="popup-title">
					<text>收不到验证码？</text>
					<text class="close-icon" @click="showHelpPopup = false">×</text>
				</view>
				<view class="help-list">
					<view class="help-item">1. 请确认手机无欠费、停机以及网络不畅的情况；</view>
					<view class="help-item">2. 打开短信垃圾箱，查看验证码是否被拦截；</view>
					<view class="help-item">3. 请确认当前使用的手机号码与注册手机号是否一致；</view>
					<view class="help-item">4. 运营商短信通道延迟，请耐心等候或重新获取验证码；</view>
				</view>
				<button class="xjs-btn-primary" @click="showHelpPopup = false">好的</button>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch } from 'vue';
import { useLogin } from '@/hooks/useLogin';
import api from '@/api';
import { onLoad } from '@dcloudio/uni-app';
onLoad((params)=>{
	//忘记或者设置密码时因为有多账号的原因需接收工作室id,然后传给设置密码页面
	setting.userId = params.userId
	setting.phone = params.phone
})
// 帮助弹框
const showHelpPopup = ref(false);
const popupChange = (e: { show: boolean }) => {
	if (!e.show) {
		showHelpPopup.value = false;
	}
};
const popup = ref();
watch(showHelpPopup, (newVal) => {
	if (newVal) {
		popup.value.open();
	} else {
		popup.value.close();
	}
});
const setting = reactive<any>({
	areaCode: '86',
	phone: '',
	verifyCode: '',
	countdown: 0,
	isCountdown: '',
	userId:'',
	getVerifyCode: async () => {
		if (setting.isCountdown || !canGetCode.value) return;
		if (!setting.phone) {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			});
			return;
		}
		// 校验是否为数字
		if (!/^\d+$/.test(setting.phone)) {
			uni.showToast({
				title: '手机号只能输入数字',
				icon: 'none'
			});
			return;
		}
		// 开始倒计时
		setting.countdown = 60;
		setting.isCountdown = true;
		const timer = setInterval(() => {
			setting.countdown--;
			if (setting.countdown <= 0) {
				clearInterval(timer);
				setting.isCountdown = false;
			}
		}, 1000);

		// API调用
		const res: any = await api({
			method: 'get',
			url: `/mobile/code/v2?mobile=${setting.phone}&type=login_pwd&countryCode=${setting.areaCode}&isVoiceCode=0&sourceType=1`
		});

		if (res.code !== 0) {
			clearInterval(timer);
			setting.isCountdown = false;
			setting.countdown = 0;
			uni.showToast({
				icon: 'none',
				mask: true,
				title: res.msg
			});
			return;
		} else {
			uni.showToast({
				icon: 'none',
				mask: true,
				title: '验证码已发送，请注意查收'
			});
		}
	}
});

// 获取验证码按钮文本
const countdownText = computed(() => {
	return setting.isCountdown ? `重新获取(${setting.countdown}s)` : '获取验证码';
});

// 是否可以获取验证码
const canGetCode = computed(() => {
	return setting.phone.length >= 4;
});

// 获取验证码按钮文本颜色
const verifyBtnStyle = computed(() => {
	return {
		color: canGetCode.value && !setting.isCountdown ? 'var(--color-primary)' : '#999'
	};
});

// 提交
const handleSubmit = async () => {
	let phoneReg = /^1[3456789]\d{9}$/; //手机号正则
	// 校验手机号
	if (!setting.phone) {
		uni.showToast({
			title: '手机号码不能为空',
			icon: 'none'
		});
		return;
	}
	if (!phoneReg.test(setting.phone)) {
		uni.showToast({
			title: '手机号码有误',
			icon: 'none'
		});
		return;
	}
	if (!setting.verifyCode) {
		uni.showToast({
			title: '请输入验证码',
			icon: 'none'
		});
		return;
	}
	// 验证码类型：登录-login，设置和忘记密码-login_pwd
	const res: any = await api({
		method: 'post',
		url: `/mall/user/v2/checkCode`,
		isNotToken:true,
		data:{
			code:setting.verifyCode,
			mobile:setting.phone,
			countryCode:setting.areaCode,
			type:'login_pwd',
		}
	});
	console.log(res)
	if(res.code !== 0){
		uni.showToast({
			title: res.msg,
			icon: 'none'
		});
		return
	}
	uni.navigateTo({
		url: `/pages/login/settingPassword?phone=${setting.phone}&verifyCode=${setting.verifyCode}&areaCode=${setting.areaCode}&userId=${setting.userId}`
	});
};
</script>

<style lang="scss" scoped>
.container {
	padding: 160rpx 48rpx 48rpx;
	min-height: 100vh;
	background-color: #fff;
	box-sizing: border-box;
	.title {
		font-size: 40rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 20rpx; // 减小底部间距，为提示语留空间
	}
	// 添加提示语样式
	.subtitle {
		font-size: 28rpx;
		color: #666;
		text-align: center;
		margin-bottom: 80rpx;
	}

	.submit-btn {
		margin: 80rpx 0;
	}

	.help {
		text-align: center;
		font-size: 24rpx;
		color: #666;

		.link {
			color: var(--color-primary);
		}
	}

	.popup-content {
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
		padding: 40rpx;

		.popup-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 40rpx;
			font-size: 32rpx;
			font-weight: 500;

			.close-icon {
				font-size: 48rpx;
				color: #999;
				line-height: 1;
			}
		}

		.help-list {
			.help-item {
				font-size: 28rpx;
				color: #666;
				line-height: 1.6;
				margin-bottom: 24rpx;

				&:last-child {
					margin-bottom: 40rpx;
				}
			}
		}
	}
}
</style>
